<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
        #l-map{height:300px;width:100%;}
        #r-result{width:100%;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO&v=2.0&services=false"></script>
    <title>关键字输入提示词条</title>
</head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<body>
<header class="head">
    <h3 class="head_button" ><a href="/">首页</a></h3>
    <h3 class="head_button"><a href="/pie">饼状图</a></h3>
    <h3 class="head_button"><a href="/pre">预测页面</a></h3>
    <h3 class="head_button"><a href="/hurt">小麦病虫害</a></h3>
    <h3 class="head_button" ><a href="/mostLike">最受欢迎农产品价格比较</a></h3>
    <h3 class="head_button" style="background-color: gray" ><a href="/earth">百度地图</a></h3>
    <h3 class="head_button" ><a href="/line">农业总产值预测-折线图</a></h3>
</header>

<section class="section">
    <div id="l-map"></div>
    <div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</section>

</body>
</html>
<script type="text/javascript">
   // 百度地图API功能
   //获取定位
   var cityName = '';
   // 初始化地图,设置城市和地图级别。
   var myCity = new BMap.LocalCity();
   myCity.get(myFun);
   var map = new BMap.Map("l-map");
   var point = new BMap.Point(116.331398,39.897445);
   map.centerAndZoom(point,16);

    function myFun(result){
        console.log(result);
        console.log(result.center);
        var j = result.center.lng;
        var w = result.center.lat;
        cityName = result.name;
        map.setCenter(cityName);
        document.getElementById("suggestId").value = cityName;
        console.log("当前城市:"+cityName+"经："+j+"维度："+w);
        // ceJu(j,w,116.001319,36.671627);
    }

    function ceJu(j,w,storelon,storelat) {
        //门店的位置
        var storelon=116.001319;	//门店经度
        var storelat=36.671627;		//门店纬度
        //当前位置
        var curlon= j;	//当前经度
        var curlat= w;	//当前纬度
        var map = new BMap.Map("l-map");
        var pointA = new BMap.Point(storelon,storelat);  // 创建点坐标A
        var pointB = new BMap.Point(curlon,curlat);  // 创建点坐标B
        var range=map.getDistance(pointA,pointB).toFixed(2);  //获取两点距离,保留小数点后两位
        console.log("门店距离当前"+range+"米");
    }


</script>
